<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>设备管理系统</title>
    <!-- 引入 jQuery，注意版本号要对应 -->
    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>

    <!--    引入BootStrap-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://"
          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <!-- 引入 Bootstrap 的 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <!--    不使用官网的，可能版本对不上，导致无法获取到BootStrap-->
    <!--    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">-->
</head>

<body>


<div class="container py-3">
    <!--    导航栏制作-->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">设备管理系统</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" th:href="@{/}"> 设备列表<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" th:href="@{/department}"> 部门列表<span class="sr-only">(current)</span></a>
                </li>
            </ul>
            <!--            添加搜索框-->
            <form class="form-inline my-2 my-lg-0"
                  th:action="@{/page/{pageNo}(pageNo=${currentPage},sortField=${'id'},sortDir=${'asc'})}"
                  th:method="get">
                <input name="pageNo" type="hidden" value="1"/>
                <input name="sortField" type="hidden" value="id"/>
                <input name="sortDir" type="hidden" value="asc"/>
                <input class="form-control mr-sm-2" name="deviceName" type="search" placeholder="查询设备"
                       aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
            </form>
        </div>
    </nav>

    <!--    设备列表制作-->
    <h2 class="text-center mb-2">设备列表</h2>
    <div class="text-right mb-3">
        <a th:href="@{/addDevice}" class="btn btn-info">添加设备</a>
    </div>
    <table class="table table-striped table-responsive-md table-bordered table-hover">
        <thead class="table-dark">
        <tr>
            <th>
                <!--                添加超链接，使其能跳转页面，从而达到排序的效果-->
                <a th:href="@{${deviceName != null
                       ? '/page/' + currentPage + '?sortField=id&sortDir=' + reverseSortDir + '&deviceName=' + deviceName
                       : (departmentID != null ? '/page/' + currentPage + '?sortField=id&sortDir=' + reverseSortDir + '&departmentID=' + departmentID
                       : '/page/' + currentPage + '?sortField=id&sortDir=' + reverseSortDir)
                       }}">ID</a>
                <!--加上一个判断，当deviceName为不同值的时候显示不同的url-->
            </th>
            <th>
                <a th:href="@{${deviceName != null
                       ? '/page/' + currentPage + '?sortField=name&sortDir=' + reverseSortDir + '&deviceName=' + deviceName
                       :(departmentID != null ? '/page/' + currentPage + '?sortField=name&sortDir=' + reverseSortDir + '&departmentID=' + departmentID
                       : '/page/' + currentPage + '?sortField=name&sortDir=' + reverseSortDir)
           }}">名称</a>
            </th>
            <th>
                <a th:href="@{${deviceName != null
                       ? '/page/' + currentPage + '?sortField=type&sortDir=' + reverseSortDir + '&deviceName=' + deviceName
                       :(departmentID != null ? '/page/' + currentPage + '?sortField=type&sortDir=' + reverseSortDir + '&departmentID=' + departmentID
                       : '/page/' + currentPage + '?sortField=type&sortDir=' + reverseSortDir)
                        }}">类型</a>
            </th>
            <th>
                <a th:href="@{${deviceName != null
                       ? '/page/' + currentPage + '?sortField=status&sortDir=' + reverseSortDir + '&deviceName=' + deviceName
                       :(departmentID != null ? '/page/' + currentPage + '?sortField=status&sortDir=' + reverseSortDir + '&departmentID=' + departmentID
                       : '/page/' + currentPage + '?sortField=status&sortDir=' + reverseSortDir)
                        }}">状态</a>
            </th>
            <th>
                <a th:href="@{${deviceName != null
                       ? '/page/' + currentPage + '?sortField=equipmentModel&sortDir=' + reverseSortDir + '&deviceName=' + deviceName
                       :(departmentID != null ? '/page/' + currentPage + '?sortField=equipmentModel&sortDir=' + reverseSortDir + '&departmentID=' + departmentID
                       :'/page/' + currentPage  + '?sortField=equipmentModel&sortDir=' + reverseSortDir)

                        }}">设备型号</a>
            </th>
            <th>
                <a th:href="@{${deviceName != null
                       ? '/page/' + currentPage  + '?sortField=department&sortDir=' + reverseSortDir + '&deviceName=' + deviceName
                       :(departmentID != null ? '/page/' + currentPage + '?sortField=department&sortDir=' + reverseSortDir + '&departmentID=' + departmentID
                       : '/page/' + currentPage + '?sortField=department&sortDir=' + reverseSortDir)

                        }}">所属部门</a>
            </th>
            <th>
                <a th:href="@{${deviceName != null
                       ? '/page/' + currentPage + '?sortField=id&sortDir=' + reverseSortDir + '&deviceName=' + deviceName
                       : (departmentID != null ? '/page/' + currentPage + '?sortField=id&sortDir=' + reverseSortDir + '&departmentID=' + departmentID
                       : '/page/' + currentPage + '?sortField=id&sortDir=' + reverseSortDir)
                       }}">操作</a>
            </th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="device : ${listDevice}">
            <td th:text="${device.id}"></td>
            <td th:text="${device.name}"></td>
            <td th:text="${device.type}"></td>
            <td th:text="${device.status}"></td>
            <td th:text="${device.equipmentModel}"></td>
            <td th:text="${device.department.name}"></td>
            <td>
                <a th:href="@{/updateDevice/{id}(id=${device.id})}" class="btn btn-sm btn-warning">更新设备信息</a>
                <a data-toggle="modal" th:data-target="'#myModal-' + ${device.id}"
                   class="btn btn-sm btn-secondary">删除设备</a>
                <!-- 模态框 -->
                <!--但是这个模态框的id被用在了多个设备行中的删除按钮上，这就导致了一个问题：无论你点击哪个设备行的删除按钮，模态框的id都是相同的，导致最终删除的设备是第一个设备。-->
                <!--要解决这个问题，你可以给每个设备行的删除按钮和对应的模态框赋予唯一的id，例如使用设备的id作为唯一标识。-->
                <div class="modal" th:id="'myModal-' + ${device.id}">
                    <!-- 模态的对话框 -->
                    <div class="modal-dialog">
                        <!-- 内容部分 -->
                        <div class="modal-content">
                            <!-- 头部 -->
                            <div class="modal-header">
                                <h4>警告！！！</h4>
                                <button type="button" class="close" data-dismiss="modal"
                                        aria-hidden="true">&times;
                                </button>
                            </div>
                            <!-- 身体 -->
                            <div class="modal-body">设备删除将无法回复，请三思而后行！！</div>
                            <!-- 尾部 -->
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <a th:href="@{/deleteDevice/{id}(id=${device.id})}"
                                   class="btn btn-danger">删除</a>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        </tbody>
    </table>

    <!--    分页制作-->
    <div th:if="${totalPages > 1}" class="mt-4">
        <nav aria-label="Page navigation example">
            <div class="col-sm-3">
                总设备数量: [[${totalItems}]]
            </div>
            <ul class="pagination justify-content-center">

                <li class="page-item" th:classappend="${currentPage == 1 ? 'disabled' : ''}">
                    <a class="page-link" th:if="${currentPage > 1}" th:href="@{${deviceName != null
                        ? '/page/' + (currentPage - 1) + '?sortField=' + sortField + '&sortDir=' + sortDir + '&deviceName=' + deviceName
                        : (departmentID != null ? '/page/' + (currentPage - 1) + '?sortField=' + sortField + '&sortDir=' + sortDir + '&departmentID=' + departmentID
                        :'/page/' + (currentPage - 1) + '?sortField=' + sortField + '&sortDir=' + sortDir)
                    }}" aria-label="Previous">
                        <!--加上一个判断，当deviceName为不同值的时候显示不同的url-->
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                    <span th:unless="${currentPage > 1}">
                            <a class="page-link disabled" aria-disabled="true" href="#" tabindex="-1"
                               aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
                        </span>
                </li>

                <span th:each="i: ${#numbers.sequence(1, totalPages)}">
                        <li class="page-item" th:classappend="${currentPage == i ? 'active' : ''}">
                            <a class="page-link" th:if="${currentPage != i}" th:href="@{${deviceName != null
                        ? '/page/' + i + '?sortField=' + sortField + '&sortDir=' + sortDir + '&deviceName=' + deviceName
                        : (departmentID != null ? '/page/' + i + '?sortField=' + sortField + '&sortDir=' + sortDir + '&departmentID=' + departmentID
                        :'/page/' + i + '?sortField=' + sortField + '&sortDir=' + sortDir)
                    }}" th:text="${i}"></a>
                            <!--加上一个判断，当deviceName为不同值的时候显示不同的url-->
                            <span th:unless="${currentPage != i}">
                                <a class="page-link disabled" href="#" tabindex="-1" aria-disabled="true"
                                   th:text="${i}"></a>
                            </span>
                        </li>
                    </span>

                <li class="page-item" th:classappend="${currentPage == totalPages ? 'disabled' : ''}">
                    <a class="page-link" th:if="${currentPage < totalPages}" th:href="@{${deviceName != null
                        ? '/page/' + (currentPage + 1) + '?sortField=' + sortField + '&sortDir=' + sortDir + '&deviceName=' + deviceName
                        : (departmentID != null ? '/page/' + (currentPage + 1) + '?sortField=' + sortField + '&sortDir=' + sortDir + '&departmentID=' + departmentID
                        :'/page/' + (currentPage + 1) + '?sortField=' + sortField + '&sortDir=' + sortDir)
                    }}" aria-label="Next">
                        <!--加上一个判断，当deviceName为不同值的时候显示不同的url-->
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                    <span th:unless="${currentPage < totalPages}">
                            <a class="page-link disabled" href="#" tabindex="-1" aria-disabled="true"
                               aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
                        </span>
                </li>

            </ul>
        </nav>
    </div>

</div>

</body>

</html>